<template>
	<view class="fenl">
		<each></each>
		<view class="confen">
			<view class="confen-left">
				<scroll-view :style="'height:'+height+'px;'" scroll-y="true">
					<view class="scroll-left" v-for="(item,index) in Listleft" :class="index == contin ? 'clicks' : ''"  @click="dianj(index)">
						{{item.cat_name}}
					</view>
				</scroll-view>
			</view>
			<view class="confen-right">
				<scroll-view :style="'height:'+height+'px;'" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
					<view v-for="(item,index) in Listcon">
						<view class="confen-right-h">
							{{item.cat_name}}
						</view>
						<view class="confen-right-c" >
							<view v-for="(it,inex) in item.children"><image :src="it.cat_icon" style="width:100%;height: 100%;"></image></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import each from '/components/each/each.vue';
	components:{
		each
	}
	export default {
		data() {
			return {
				height:0,
				Listleft:[],
				Listcon:[],
				contin:0,
				scrollTop:0
			};
		},
		onLoad(){
			this.height =( uni.getWindowInfo().windowHeight-45) //获取高度并减掉按钮的高;
			this.ajaxleft();
		},
		methods:{
			ajaxleft(){
				let th = this
				uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/categories',
					success(res) {
						 th.Listleft = res.data.message;
						 th.Listcon =  th.Listleft[0].children;
					}
				})
			},
			dianj(index){
				  this.Listcon =  this.Listleft[index].children;
				  this.contin = index;
				  this.scrollTop = !this.scrollTop
			}
		}
	}
</script>
<style lang="scss">
.fenl{
	height:100vh;
	display: flex;
	flex-direction: column;
}

.confen{
	flex:1;
	display: flex;
	scrollbar-width: none;
	>.confen-left{
		flex:1;
		background-color: #F6F6F6;
		color:#BABABA;
		.scroll-left{
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
	}
	>.confen-right{
		flex:2;
		margin-left:30rpx;
		.confen-right-h{
			height:60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			font-weight: 700;
			margin-top:20rpx;
		}
		.confen-right-c{
			display: flex;
			flex-wrap:wrap;
			>view{
				width:25%;
				height:150rpx;
				margin:3%;
			}
		}
	}
}
.clicks{
	color: black;
	font-size: 35rpx;
	font-weight: 700;
}
</style>
